<template>
    <el-main >
        <el-card  class="box-card" style="width:320px;line-height:50px;   margin: auto;">
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
            <div>
                <el-button type="text" style="color:#66b1ff" @click="dialogVisible = true">修改个人信息</el-button>

                <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="30%">
                  <el-form ref="form" label-width="80px">
                    <el-form-item label="用户名">
                      <el-input v-model="info.IID"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                      <el-input v-model="info.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="稽查报告">
                      <el-input v-model="info.report"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="info.password" show-password></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="implementModify">确 定</el-button>
                  </span>
                </el-dialog>
              </div>

          </div>
        </template>
        <div class="text item" style="float:left">
          <span style="margin-right:115px">用户名:</span><span>{{info.IID}}</span>
        </div>
        <div class="text item" style="float:left">
          <span style="margin-right:100px">用户权限:</span><span>稽查员</span>
        </div>
        <div class="text item" style="float:left">
          <span style="margin-right:100px">联系方式:</span><span>{{info.phone}}</span>
        </div>
        <div class="text item" style="float:left">
          <span style="margin-right:130px">密码:</span><span>*******</span>
        </div>
      </el-card>
    </el-main>

</template>

<script>
  import cookies from 'js-cookie'
  import axios from 'axios'
  export default {
    data(){
      return {
        info:{
          IID: "",
          password: "",
          phone: "",
          report: "",
        },
        role:'',
        dialogVisible:false,
        form: {
          name: '',
          number:''
        }
      };
    },
    mounted() {
      this.getInfo()
    },
    methods: {

      async implementModify(){
        let mydata={
          iid:cookies.get("id")
        }
        console.log(mydata)
        axios.post('/inspector/update',this.info).then((res)=>{
          console.log(res)
          this.dialogVisible=false
        })
      },
      async getInfo(){
        let mydata={
          iid:cookies.get("id")
        }
        console.log(mydata)
        axios.post('/inspector/get',mydata).then((res)=>{
          console.log(res)
          this.info=res.data.data[0]
          this.role=cookies.get("role")
          console.log(this.role)
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>


  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 480px;
  }
  .el-menu {
	border-right:0!important;
}
</style>
